/**
 * copy 指令
 * 
 *  使用方式：
 *    v-copy="'张三'"
 */

// const copy = {
//   mounted(el, binding) {
//     // console.log('binding', binding)
//     el.onclick = () => {
//       // 1. 创建一个 input 元素
//       const input = document.createElement('input')
//       // 2. 给 input 赋值 value
//       input.value = binding.value
//       // 3. 将 input 写入DOM
//       document.body.appendChild(input)
//       // 4. 选中 input 的值
//       input.select()
//       // 5. 执行拷贝
//       document.execCommand('Copy')
//       // 6. 移除 input
//       document.body.removeChild(input)

//       console.log('click', binding.value)
//     }
//   },

//   updated(el, binding) {
//     el.onclick = () => {
//       // 1. 创建一个 input 元素
//       const input = document.createElement('input')
//       // 2. 给 input 赋值 value
//       input.value = binding.value
//       // 3. 将 input 写入DOM
//       document.body.appendChild(input)
//       // 4. 选中 input 的值
//       input.select()
//       // 5. 执行拷贝
//       document.execCommand('Copy')
//       // 6. 移除 input
//       document.body.removeChild(input)

//       console.log('click', binding.value)
//     }
//   }
// }

const copy = (el, binding) => {
  el.onclick = () => {
    // 1. 创建一个 input 元素
    const input = document.createElement('input')
    // 2. 给 input 赋值 value
    input.value = binding.value
    // 3. 将 input 写入DOM
    document.body.appendChild(input)
    // 4. 选中 input 的值
    input.select()
    // 5. 执行拷贝
    document.execCommand('Copy')
    // 6. 移除 input
    document.body.removeChild(input)

    console.log('click', binding.value)
  }
}

export default copy





// 1. 对象定义的写法
// const copy = {
//   // 在绑定元素的 attribute 前
//   // 或事件监听器应用前调用
//   created(el, binding, vnode, prevVnode) {
//     // 下面会介绍各个参数的细节
//   },
//   // 在元素被插入到 DOM 前调用
//   beforeMount(el, binding, vnode, prevVnode) {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都挂载完成后调用
//   mounted(el, binding, vnode, prevVnode) {
//     // console.log('el', el)
//     // console.log('binding', binding)
//     // console.log('vnode', vnode)
//     // console.log('prevVnode', prevVnode)
//   },
//   // 绑定元素的父组件更新前调用
//   beforeUpdate(el, binding, vnode, prevVnode) {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都更新后调用
//   updated(el, binding, vnode, prevVnode) {
//     console.log('el', el)
//     console.log('binding', binding)
//     console.log('vnode', vnode)
//     console.log('prevVnode', prevVnode)
//   },
//   // 绑定元素的父组件卸载前调用
//   beforeUnmount(el, binding, vnode, prevVnode) {},
//   // 绑定元素的父组件卸载后调用
//   unmounted(el, binding, vnode, prevVnode) {}
// }

// 2. 简写的函数写法
//    表示两个钩子, mounted\updated
// const copy = function(el, binding, vnode, prevVnode) {
//   console.log('copy')
// }

// export default copy